<template>
	<!-- 退费弹窗：课程退费、商品退费、订金退费 -->
	<div class="refundpopup" ref="refundpopup">
		<el-dialog 
			:title="parentData.title"
			:close-on-click-modal="false"
			:visible.sync="parentData.show"
			:modal="false"
			:modal-append-to-body="false"
			element-loading-background="rgba(0, 0, 0, 0.1)">
			<div class="row">
				<div class="txtbox">
					<span class="label">学员姓名：</span>
					<span class="value">{{parentData.studentInfo.studentName}}</span>
				</div>
				<div class="txtbox">
					<span class="label">联系人：</span>
					<span class="value">{{parentData.studentInfo.parentName}}</span>
				</div>
				<div class="txtbox">
					<span class="label">联系电话：</span>
					<span class="value">{{parentData.studentInfo.phone}}</span>
				</div>
			</div>
			<div class="row table">
				<span class="title">{{parentData.tableSelect.title}}：</span>
				<div class="table" style="width:100%;">
					<template >
						<el-table
							ref="tableSelect"
							:data="parentData.tableSelect.table.tbody"
							border
							style="width: 100%;font-size:0.16rem;"
							@select="tableSelecthandleSelectionChange"
							@select-all="selectAll">
							<el-table-column type="selection"></el-table-column>
							<el-table-column 
								align="center"
								v-for="row in parentData.tableSelect.table.thead"
								:key="row.propName"
								:prop="row.propName"
								:label="row.labelNmae"
								:width="row.width">
								<!-- <template slot-scope="scope">
									<span v-if="row.propName=='courseTime'">
										{{scope.row.startTime}}<br>
										{{scope.row.endTime}}
									</span>
									<span v-else-if="row.propName=='firstTimeEnd'">										
										<span v-if="scope.row.firstTimeEnd">
											{{scope.row.firstTimeEnd.split(' ')[0]}}<br>
											{{scope.row.firstTimeEnd.split(' ')[1]}}
										</span>
										<span v-else></span>
									</span>
									<span v-else>{{scope.row[row.propName]}}</span>
								</template> -->
							</el-table-column>
						</el-table>
					</template>
				</div>
			</div>
			<div class="row table">
				<span class="title">{{parentData.tableResult.title}}：</span>
				<div class="table" style="width:100%;">
					<template >
						<el-table
							
							:data="parentData.tableResult.table.tbody"
							border
							style="width: 100%;font-size:0.16rem;">
							<el-table-column align="center" prop="courseName" label="名称"></el-table-column>
							<el-table-column align="center" prop="chargeMode" label="收费模式"></el-table-column>
							<el-table-column align="center" prop="payModeName" label="收款方式"></el-table-column>
							<!-- <el-table-column v-if="refundpopup_confirm.courseType==2" align="center" prop="courseHour" label="购买数量">
								<template><span>1</span></template>
							</el-table-column> -->
							<el-table-column align="center" prop="courseBuyNum" label="购买数量"></el-table-column>
							<el-table-column align="center" prop="courseTimeMode" label="单位"></el-table-column>
							<el-table-column align="center" prop="simpleprice" label="课程单价"></el-table-column>
							<el-table-column align="center" prop="courseMoney" label="课程总价"></el-table-column>
							<el-table-column align="center" prop="realMoney" label="实际支付"></el-table-column>
							<el-table-column align="center" prop="useCourseHour" label="已上课时"></el-table-column>
							<el-table-column v-if="refundpopup_confirm.courseType==2" align="center" prop="useCourseMoney" label="课耗">
								<template><span>--</span></template>
							</el-table-column>
							<el-table-column v-else align="center" prop="useCourseMoney" label="课耗"></el-table-column>
							<el-table-column align="center" prop="surplusCourseHour" label="剩余课时"></el-table-column>
							<el-table-column v-if="refundpopup_confirm.courseType==2" align="center" prop="surplusCourseMoney" label="剩余课程费用">
								<template><span>--</span></template>
							</el-table-column>
							<el-table-column v-else align="center" prop="surplusCourseMoney" label="剩余课程费用"></el-table-column>
							<el-table-column v-if="refundpopup_confirm.courseType==2" align="center" prop="needRefundMoney" label="应退费">
								<template><span>--</span></template>
							</el-table-column>
							<el-table-column v-else align="center" prop="needRefundMoney" label="应退费"></el-table-column>

							<el-table-column label="操作" align="center">
								<template slot-scope="scope">
									<el-button
									style="font-size:0.16rem;"
									type="text"
									@click="tableResulthandleDelete(scope.$index, parentData.tableResult.table.tbody)">删除</el-button>
								</template>
							</el-table-column>
						</el-table>
					</template>
				</div>
				<div class="statisticsBox">
					<span>{{parentData.tableResult.summarize}}</span>
				</div>
			</div>
			<div class="row button">
				<el-button class="cancel resetElement" type="primary" @click="cancel">上一步</el-button>
				<el-button class="ok resetElement" type="primary" :disabled="parentData.tableResult.table.tbody.length>0?false:true" @click="refundConfirm">确定退款</el-button>
			</div>
		</el-dialog>
		<refundpopup_confirm :refundpopup_confirm="this.refundpopup_confirm" v-on:back="back"></refundpopup_confirm>
	</div>
</template>

<script>
	import refundpopup_confirm from './refundpopup_confirm'
	let vm;
	export default{
		components:{refundpopup_confirm},
		props:['refundpopup'],
		data(){
			return {
				parentData:this.refundpopup,
				tableResult_btnColWidth:50,
				refundpopup_confirm:{
					title:'退费',
					courseType:-1,
					show:false,
					studentInfo:{
						studentName:'',
						parentName:'',
						phone:''
					},
					tableResult:{
						table:{
							tbody:[],
							thead:[]
						},
						summarize:''
					},
					actrulMoney:0,
					reasonShow:true,
					reasonTxt:'',
					refundMethodRadio:'100',
					rName:'',
					rPhone:''
				}
			}
		},
		methods:{
			/**初始化*/
			init(data){
				
				this.tableResult_btnColWidth=0.5*screen.width / 19.2;
			},
			updateByData(data){
				// debugger
				let chargeMode = tool.getDictNameByValue(-100,'charge_mode',false)//收费模式数据字典
				let courseStatus = tool.getDictNameByValue(-100,'course_status',false)//学员课程状态数据字典
				//课程数据处理
				for(let i =0;i<data.tableSelect.table.tbody.length;i++){
					let d = data.tableSelect.table.tbody[i];
					
					d["useCourseHour"] = d["useCourseHour"]||0;
					d["startTime"] = d["startTime"]||"";
					d["endTime"] = d["endTime"]||"";
					d["courseProgress"] = d["useCourseHour"]+"/"+d["totalHour"];
					d["courseTime"] = d["startTime"]||d["endTime"];
					if(d["startTime"]&&d["endTime"]){
						d["courseTime"] = d["startTime"]+"\n"+d["endTime"];
					}
					d["firstTimeEnd"] = d["firstTime"]||"";
					if(d["firstTimeEnd"]!==''){
						let splitstr=d["firstTimeEnd"].split(' ');
						d["firstTimeEnd"]=splitstr[0]+'\n'+splitstr[1];
					}
					
					d["chargeMode"]=chargeMode[d["chargeMode"]];
					d["courseStatus"]=courseStatus[d["courseStatus"]];
															
				}	
				
				
				this.parentData=data;												
				if(this.$refs.tableSelect){
					this.$refs.tableSelect.clearSelection();
				}
				if(this.$refs.refundpopup){
					this.$refs.refundpopup.style.display='block';
				}
			},
			/**接口获取数据 */
			api_getDataByParam(param){

			},
			/**表格选中 */
			selectAll(indata){
				if(indata){
					this.tableSelecthandleSelectionChange(indata,{});
				}
			},
			tableSelecthandleSelectionChange(indata,selectRow){
				let val=[];
				//全日制课程只能单选
				this.refundpopup_confirm.courseType=-1;
				if(selectRow['courseType']==2){
					val=[selectRow];
					this.refundpopup_confirm.courseType=2;
					indata.splice(indata.indexOf(selectRow),1);
					indata.forEach(row => {
						this.$refs.tableSelect.toggleRowSelection(row);
					});
				}else{
					for(let i=0;i<indata.length;i++){
						let r=indata[i];
						if(r['courseType']==2){
							this.$refs.tableSelect.toggleRowSelection(r);
							indata.splice(i,1);
							i--;
						}
					}
					val=indata;
				}

				let chargeModeMatch = tool.getDictNameByValue(-100,'charge_mode',false);//收费模式数据字典
				let payModeMatch = tool.getDictNameByValue(-100,'pay_mode',false);//收费模式数据字典
				vm.parentData.tableResult.summarize="已选"+0+"门课程，总计退费：￥"+0;
				//计算课程总退费
				let sumMoney=0;
				let databody=[];
				this.parentData.tableResult.table.tbody=[];
				for(let i = 0;i<val.length;i++){
					let stuCourseId = val[i].studentCourseId;
					let paras={studentCourseId:stuCourseId};	
					let courseType=val[i]['courseType'];
					api.getDropCoursePackageInfo(paras).then(function(data){
						if(data.result=="操作成功"){
							let dbody = data.info[0];
							// debugger
							dbody["chargeMode"]=chargeModeMatch[dbody["chargeMode"]];
							dbody['payModeName']=payModeMatch[dbody['payMode']];
							dbody['courseType']=dbody['courseType']||courseType;
							let unitObj=vm.getCourseUnitPrice(2,dbody);
							dbody["simpleprice"] = unitObj.unitPrice;
							sumMoney+= dbody["needRefundMoney"];	
							dbody.courseTimeMode=unitObj.unit;
							dbody['relMoney']=dbody['needRefundMoney'];
							//全日制
							// if(dbody['courseType']==2){
							// 	dbody['courseHour']=1;
							// 	dbody['useCourseMoney']='--';
							// 	dbody['surplusCourseMoney']='--';
							// 	dbody['needRefundMoney']='--';
							// }

							databody.push(dbody);
							vm.parentData.tableResult.summarize="已选"+databody.length+"门课程，总计退费：￥"+sumMoney.toFixed(2);
						}
					});
				}
				this.parentData.tableResult.table.tbody=databody;
				
			},
			/**
			 * 获取课程数据单价和单位
			 * @param type 1-收费；2-退费
			 * @param course 课程数据，包含课程包
			 * @returns {unit,unitPrice}
			 */
			getCourseUnitPrice(type,course){
				let unit='课时';
				let unitPrice='';
				if(type==1){
					if(course.coursePackage.chargeMode==3){
						unit=tool.getDictNameByValue(course.coursePackage.courseTimeMode,
						'course_time_mode');
					}
					else{
						unitPrice = Math.ceil(course.coursePackage.totalMoney * 100 / 
						course.coursePackage.courseHour) / 100;
					}
				}
				else{
					if(course.coursePackage.chargeMode==3){
						unit=tool.getDictNameByValue(course.coursePackage.courseTimeMode,
						'course_time_mode');
					}
					else{
						unitPrice = Math.ceil(course.coursePackage.totalMoney * 100 / 
						course.coursePackage.courseHour) / 100;
					}
				}
				//双师课
				if(course.courseType == 4) {
					unit = "节";
				}

				return {unit:unit,unitPrice:unitPrice};
			},
			/**结算表格删除行 */
			tableResulthandleDelete(index,table){
				let tble = this.parentData.tableSelect.table.tbody;
				let row;				
				let stuCourseId = table[index]["studentCourseId"];
				for(let j=0;j<tble.length;j++){
					if(stuCourseId==tble[j]["studentCourseId"]){
						row = tble[j];
						break;
					}						
				}					
											
				this.$refs.tableSelect.toggleRowSelection(row);
				table.splice(index, 1);
			},
			cancel(){
				this.parentData.show=false;
				this.$parent.setVisible();
				this.$refs.refundpopup.style.display='none';
			},
			refundConfirm(){
				
				this.parentData.show=false;
				this.refundpopup_confirm.show=true;
				let paymoney=0;
				this.refundpopup_confirm.refundMethodRadio='2';
				for(let i =0;i<this.parentData.tableResult.table.tbody.length;i++){
					let row=this.parentData.tableResult.table.tbody[i];
					row.maxMoney=row.relMoney+0;
					paymoney+=row["needRefundMoney"];
					if(row.payMode==3||row.payMode==4){
						this.refundpopup_confirm.refundMethodRadio='100';
					}
				}
				this.refundpopup_confirm.studentInfo=this.parentData.studentInfo;
				this.refundpopup_confirm.tableResult=this.parentData.tableResult;
				this.refundpopup_confirm.actrulMoney=paymoney.toFixed(2);
				this.refundpopup_confirm.reasonTxt = '';
				this.refundpopup_confirm.rName = ''+this.refundpopup_confirm.studentInfo.parentName;
				this.refundpopup_confirm.rPhone = ''+this.refundpopup_confirm.studentInfo.phone;
								// console.log(this.refundpopup_confirm)
			},
			/**减一 */
			reduceNum(row,field){
				if(row[field]<=1) {
					return;
				}
				row[field]=row[field]-1;
			},
			/**加一 */
			addNum(row,field,allfield){
				if(row[field]>=row[allfield]) {
					return;
				}
				row[field]=row[field]+1;
			},
			back(){
				// console.log('back')
				this.parentData.show=true;
				this.parentData.tableResult.table.tbody=[];
				this.$refs.tableSelect.clearSelection();
			},
			/**
			 * 刷新退费
			 */
			refreshData(){
				this.$emit('callback');
			}
		},
		computed:{
			
		},
		mounted(){
			vm = this;
		},
		created : function() {
			
		}
	}
</script>

<style lang="scss">
	.refundpopup{
		display: none;
		padding: 0 0.34rem 0.2rem 0.34rem;
		font-size: 0.16rem;
		.row{
			width: 100%;
			display: flex;
			margin-top: 0.1rem;
			font-size: 0.16rem;
			.title{
				font-size: 0.16rem;
				margin-bottom: 0.12rem;
				font-weight: bold;
			}
			.otherinfo{
			}
			.txtbox{
				width: 22%;
				.label{

				}
				.value{

				}
			}
			.table{

			}
			.statisticsBox{
				width: 100%;
				text-align: right;
				margin-top: 0.05rem;
			}
		}
		.row.table{
			flex-wrap: wrap;
			.el-table{
				// max-height: 3.5rem !important;
				// .el-table__body-wrapper{
				// 	max-height: 3.02rem !important;
				// }
			}
			.cell{
				// text-align: center !important;
				white-space: pre-line;
			}
		}
		.row.button{
			justify-content: center;
			.ok{
				margin-left: 1rem;
			}
		}
		// 滚动条
		.el-table__body-wrapper::-webkit-scrollbar {
			width: 0.05rem;
		}
		.el-table__body-wrapper::-webkit-scrollbar-thumb {
			border-radius: 0.5rem;
			background: #BBBBBB;
		}
		.el-table__body-wrapper::-webkit-scrollbar-track {
			background: #F2F6FC;
		}
	}
</style>